<template>
  <el-button type="primary" size="default" @click="handleExport">
    导出Excel
  </el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.objectId }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="描述" width="180">
      <template #default="scope">
        {{ scope.row.desc }}
      </template>
    </el-table-column>
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img :src="scope.row.poster" alt="" style="height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="链接" width="180">
      <template #default="scope">
        <a :href="scope.row.link" target="_blank" rel="noopener noreferrer">
          点击预览链接
        </a>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { bannerGet } from "@/api/product";
import { excelExport2 } from "@/utils/excel-sdk";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    bannerGet().then((res) => {
      console.log(res);
      this.tableData = res.data.results;
    });
  },
  methods: {
    handleEdit(idx, row) {
      this.$router.push({
        path: "/banner/edit",
        query: row,
      });
    },
    handleExport() {
      excelExport2(
        this.tableData,
        {
          objectId: "轮播ID",
          desc: "描述",
          link: "链接",
          poster: "图片",
        },
        "轮播列表2206"
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>
